<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="/reader/static/favicon.ico" type="image/x-icon">
    <title>Reader</title>
    <style>
        body {
            background-color: whitesmoke;
            font-size: 20px;
            font-family: 'Segoe UI', '等线', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

        #container {
            width: 80%;
            margin: auto;
        }

        #container ul {
            list-style: none;
            margin-top: 5px;
            width: fit-content;
            min-width: 60%;
            padding-left: 0px;
            border: rgba(22, 22, 22, 0.3) solid 1px;
        }

        #container ul li {
            display: flex;
            padding: 5px;
            border-top: rgba(22, 22, 22, 0.3) solid 1px;
        }

        #container ul .first {
            border-top: none;
        }

        #container ul li:hover {
            background-color: rgba(22, 22, 22, 0.1);
        }

        #container a {
            text-decoration: none;
            color: #0366d6;
        }

        #container a:hover {
            text-decoration: underline solid;
            /* text-decoration-style: ; */
        }

        #container ul li span {
            flex: 1;
            flex-basis: auto;
        }
    </style>
    <script>
        // 无格式后缀的文件名 以及 书籍名称
        let bookFileNameList = [
            "HP1-EN",
            "HP2-EN",
            "HP3-EN",
            "HP4-EN",
            "HP5-EN",
            "HP6-EN",
            "HP7-EN"
        ];
        let bookTitleList = [
            "Harry Potter and the Sorcerer's Stone",
            'Harry Potter and The Chamber Of Secrets',
            'Harry Potter and the Prisoner of Azkaban',
            'Harry Potter and the Goblet of Fire',
            'Harry Potter and the Order of the Phoenix',
            'Harry Potter and The Half-Blood Prince',
            'Harry Potter and the Deathly Hallows'];
        // 生成书籍列表
        function generateBookList() {
            let bookListUl = document.getElementById("bookListUl");
            for (let i = 0; i < bookFileNameList.length; i++) {
                const bookFileName = bookFileNameList[i];
                const bookTitle = bookTitleList[i];
                let a = document.createElement("a");
                a.href = "/reader/static/reader.html?bookName=" + bookFileName;
                a.target = "_blank";
                a.innerHTML = bookTitle;
                let tmpLi = document.createElement("li");
                if (i == 0) tmpLi.className = "first";
                tmpLi.appendChild(a);
                bookListUl.appendChild(tmpLi);
            }
        }

        window.onload = function () {
            generateBookList();
        };
    </script>
</head>

<body>
    <div id="container">
        <h1>
            Online English Book Reader
        </h1>
        <div style="padding-left: 5px;">
            <a href="/reader/static/words.html" target="_blank">All words</a>&nbsp;
            <a href="/reader/static/sentences.html" target="_blank">All sentences</a>
        </div>
        <ul id="bookListUl">
        </ul>
        <p style="opacity: 0.8;">For study purpose only!</p>
    </div>
</body>

</html>